<template>
  <view class="container">
    <!-- 地图容器 -->
    <view >
      <BaiduMap
        v-if="mapBoolean"
        :maxHeight="mapMaxHeight"
        :createCircle="createCircle"
        :radius="radius"
        :worthIt="worthIt"
        :centerPoint="centerPoint"
        @update-value="handleUpdateValue"
        @weilan="handleWeilan"
      />
    </view>
    <!-- 范围选择控件 -->
    <view class="control-panel">
      <uni-row>
        <uni-col :span="1"> &nbsp; </uni-col>
        <uni-col :span="19"> 形状 </uni-col>
        <uni-col :span="4"> 圆形 </uni-col>
      </uni-row>
      <uni-row>
        <uni-col :span="1"> &nbsp; </uni-col>
        <uni-col :span="22">
          <!-- 直径选择器 -->
          <picker
            mode="selector"
            :range="diameterOptions"
            :value="selectedIndex"
            @change="handleDiameterChange"
            class="diameter-picker"
          >
            <view class="picker-content">
              <text class="title">直径</text>
              <view class="selected-value">
                <text>{{ diameterOptions[selectedIndex] }}</text>
                <text class="arrow">▼</text>
              </view>
            </view>
          </picker>
        </uni-col>
        <uni-col :span="1"> &nbsp; </uni-col>
      </uni-row>
      <uni-row>
        <uni-col :span="1"> &nbsp; </uni-col>
        {{ sharedValue }}
        <uni-col :span="5"> 围栏名称 </uni-col>
        <uni-col :span="18" class="name"> {{ childValue }} </uni-col>
      </uni-row>
      <uni-row>
        <uni-col :span="1"> &nbsp; </uni-col>
        <uni-col :span="22">
          <button style="background: #4e6bb9" @click="Save">保存</button>
        </uni-col>
      </uni-row>
      <!-- <button @click="drawCircleFence">绘制圆形围栏</button>
      <button @click="clearFence">清除围栏</button> -->
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import {
  SaveElectronicFenceInformation,
  ElectronicFenceInformation,
} from '@/services/map-fence'
import BaiduMap from '../../components/BaiduMap.vue'
import { useTabParamsStore } from '@/stores/modules/shebei'
const tabParamsStore = useTabParamsStore()
// 动态加载地图
const mapBoolean = ref(false)
const mapMaxHeight = ref(65)
const createCircle = ref(true)
const worthIt = ref(false)

const radius = ref('50') // 默认半径
const id = ref('')
// 中心点绘制
const centerPoint = reactive([])
// 选项数据
const diameterOptions = ['50km', '100km', '300km', '500km', '700km']
const selectedIndex = ref(0) // 当前选中索引
const childValue = ref('') // 存储子组件的值
const WLValue = ref('') // 存储子组件的值

// 监听子组件的事件，更新 childValue
const handleUpdateValue = (value) => {
  childValue.value = value
  console.log('子组件的值:', value)
}
// 围栏信息

const handleWeilan = (value) => {
  WLValue.value = value
  console.log('子组件的值:', value)
}
// 拿值
onShow(() => {
  if (tabParamsStore.params) {
    id.value = tabParamsStore.params.imei
    // 使用参数
    console.log('接收到的参数:', tabParamsStore.params)
    // 清空参数（避免重复使用）
    // tabParamsStore.clearParams()
  }
})
// 处理选择变化
const handleDiameterChange = (e) => {
  selectedIndex.value = e.detail.value
  radius.value = diameterOptions[selectedIndex.value].slice(0, -2)
}
// 回显
const getData = async () => {
  const res = await ElectronicFenceInformation(id.value)
  if (res.data.length > 0) {
    worthIt.value = true
    //  res.data[0]
    centerPoint.value = {
      lat: res.data[0].center_point_coordinates_latitude,
      lng: res.data[0].center_point_coordinates_longitude,
    }
    radius.value = res.data[0].radius
    diameterOptions.map((item, index) => {
      if (item.slice(0, -2) == res.data[0].radius) {
        selectedIndex.value = index
      }
    })
  } else {
    worthIt.value = false
  }
  mapBoolean.value = true
}
// 保存
const Save = async () => {
  const res = await SaveElectronicFenceInformation({
    center_point_coordinates_longitude: WLValue.value.lng,
    center_point_coordinates_latitude: WLValue.value.lat,
    radius: WLValue.value.radius,
    imei: id.value,
  })
  uni.showToast({
    title: res.data,
    icon: 'success',
    duration: 2000,
  })
}
onMounted(() => {
  getData()
})
</script>
<style scoped>
.container {
  background-color: #f5f5f5;
}
.control-panel {
  margin-top: 1%;
  background-color: #f5f5f5;
}
.uni-row {
  font-size: 1rem;
  color: #333;
  font-weight: normal;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  margin-top: 10px;
}
.name {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
  /* max-width: 200px; 设置最大宽度以限制文本的显示长度 */
}
/* 选择器整体样式 */
.diameter-picker {
  /* padding: 10px; */
  background: #ffffff;
  border-radius: 12rpx;
  /* border: 1rpx solid #e5e5e5; */
}

/* 内容布局 */
.picker-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 标题样式 */
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: normal;
}

/* 选中值样式 */
.selected-value {
  display: flex;
  align-items: center;
  gap: 20rpx;
  font-size: 30rpx;
  color: #666;
}

/* 下拉箭头 */
.arrow {
  color: #999;
  font-size: 24rpx;
  transform: scaleY(0.7);
  transition: transform 0.2s;
}

/* 点击反馈效果 */
.diameter-picker:active {
  background-color: #f5f5f5;
}

/* 针对不同平台的样式适配 */
/* #ifdef H5 */
.diameter-picker {
  cursor: pointer;
}
slider {
  margin: 20rpx 0;
}

button {
  margin: 10rpx 0;
  background: #007aff;
  color: white;
}
</style>
